<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h3{
            text-align: right;
        }
    </style>
</head>
<body>

<!--
        定时器
          1. 循环定时器      每隔过久执行一次
          2.一次性定时器     延时多久执行一次
-->
<h3></h3>
<button id="stopTIme">停止时间</button>
<button>触发一次性定时器</button>
<button>清除一次性定时器</button>
<script>

    var h3 = document.getElementsByTagName('h3');
    //  循环定时器   参数1   定时器需要做的任务   参数2 定时器的时间间隔   毫秒    返回值  定时器的唯一标识   后期可用于清除定时器
    var  index =   setInterval(function (){
        var date = new Date();
        // 获取时间分量
        var fullYear = date.getFullYear();
        var month =   date.getMonth()+ 1;
        var day = date.getDate();
        var hour = date.getHours() > 9 ? date.getHours(): '0'+date.getHours();
        var minute = date.getMinutes() > 9 ? date.getMinutes(): '0'+date.getMinutes();
        var seconds = date.getSeconds() >9 ? date.getSeconds() : '0'+date.getSeconds();
        var  time = '今天是'+fullYear+'年'+month+'月'+day+'日 '+hour+'点'+minute+'分'+seconds+'秒'
        h3[0].innerText = time
    },1000)

    // 停止定时器
    document.getElementById("stopTIme").onclick = function (){
        // 清除循环定时器  参数  需要停止的定时器的id
        clearInterval(index)
    }

    // 定义一个一次性定时器   延时多久执行
    var timeOut;
    document.getElementsByTagName('button')[1].onclick = function (){
       timeOut =   setTimeout(function () {
            console.log("hello")
        },3000)
    }

    // 清除setTimeout
    document.getElementsByTagName('button')[2].onclick = function (){
         clearTimeout(timeOut)
    }

</script>

</body>
</html>